<template>
	<div class="co_comment">
		<!-- 评分 -->

		<div class="co_Scoring">
			<div class="co_sco_xing">
				<div class="co_sco_xing_img">
					<img v-for="(item,index) in co_sco_img" :src="item" @click="co_sco_img_click(index+1)">
				</div>
				<div class="co_sco_xing_pin" v-if="co_sco_status">给课程打个分吧～</div>
				<div class="co_sco_xing_fen" v-else>{{co_sco_fen}}分 {{co_sco_ping}}</div>
			</div>
			<div class="co_sco_sub">
				<span class="co_sco_sub_btn_true" v-if="co_sco_sub">提交</span>
				<span class="co_sco_sub_btn_false" v-else @click='co_sco_sub_btn'>提交</span>
			</div>
		</div>

		<div class="co_Leaving">
			<textarea
				value=""
				placeholder="本课程的内容、讲师等方面给你留下了怎样的印象？是否值得推荐给朋友听？说说你的听课心得吧～"
				maxlength="200"
				v-model="co_lea_text"
			/>
			<div class="co_lea_number">{{co_lea_number}}/200字</div>
		</div>

		<div v-if="co_sco_fen_select != 0" class="co_Detailed">
			<div class="co_det_box" v-for="(item,index) in co_det_list">
				<div class="co_det_box_title">
					{{item.title}}
				</div>
				<div class="co_det_box_img">
					<img v-for="(ite,ind) in co_det_list_img_status[index]" :src="co_det_list_img_status[index][ind]" @click="co_det_box_click(index,ind)">
				</div>
				<div class="co_det_box_tips">
					{{co_det_list_tips[item.fen_query-1]}}
				</div>
			</div>
		</div>
		<div class="co_Title">
			{{co_title}}
		</div>
		<div class="co_Mask" v-show="co_Mask"></div>
		<div class="co_com_tips" v-show="co_tips_status">
			<Tips :type='type'></Tips>
		</div>
	</div>
</template>

<script>
import {
  mapState
} from 'vuex'
import {
  comments
} from '@/api/comment'
import Tips from '@/components/public/Tips.vue'
export default {
  components: {
    Tips
  },
  computed: {
    ...mapState({
      app_id: state => state.app_id,
      user_id: state => state.member_id
    })
  },
  created () {
    if (this.$route.query.status == 2) {
      this.$nextTick(() => {
        this.co_sco_img_click(this.$route.query.parameter.score)
        this.co_lea_text = this.$route.query.parameter.content
        this.co_det_list_requery = this.$route.query.parameter.degree
        this.comment_id = this.$route.query.parameter.comment_id
        var degree = this.$route.query.parameter.degree
        var degree_arr = degree.split(',')
        // console.log(degree_arr)
        for (var i = 0; i < 5; i++) {
          this.co_det_box_click(i, parseInt(degree_arr[i]) - 1)
        }
      })
    }
    this.lecturer_id = this.$route.query.parameter.lecturer_id
    this.cid = this.$route.query.parameter.curriculum_id
    this.co_title = this.$route.query.parameter.title
    this.co_sco_img_cre()
    this.$store.commit('updateLoadingStatus', {isLoading: false})
  },
  data () {
    return {
      co_tips_status: false,
      type: '评价成功',
      cid: 0,
      lecturer_id: 0,
      co_Mask: false,
      co_sco_sub: true,
      co_sco_fen: 1,
      comment_id: '',
      co_sco_fen_select: 0,
      co_sco_status: true,
      co_sco_ping: '',
      co_sco_ping_arr: ['大失所望', '比较一般', '还算不错', '非常满意', '物超所值'],
      co_sco_img_false: 'https://o6wndwjxn.qnssl.com/star.svg',
      co_sco_img_true: 'https://o6wndwjxn.qnssl.com/Full%20of%20stars.svg',
      co_sco_img: [],
      co_lea_text: '',
      co_lea_number: 0,
      co_title: '风靡亚洲的家居收纳课：教你一次整理，用不复乱！',
      co_det_list_tips: ['不佳', '一般', '不错', '满意', '超棒'],
      co_det_list_img: [
        'https://o6wndwjxn.qnssl.com/There%20is%20no.svg',
        'https://o6wndwjxn.qnssl.com/poor.svg',
        'https://o6wndwjxn.qnssl.com/general.svg',
        'https://o6wndwjxn.qnssl.com/good.svg',
        'https://o6wndwjxn.qnssl.com/Satisfied%20with%20the.svg',
        'https://o6wndwjxn.qnssl.com/great.svg'
      ],
      co_det_list_img_status: [
        [],
        [],
        [],
        [],
        []
      ],
      co_det_list_number: [5, 5, 5, 5, 5],
      co_det_list_requery: '5,5,5,5,5',
      co_det_list: [{
        title: '讲师专业',
        fen_query: 5
      }, {
        title: '方法有效',
        fen_query: 5
      }, {
        title: '逻辑清晰',
        fen_query: 5
      }, {
        title: '声音画质',
        fen_query: 5
      }, {
        title: '课程服务',
        fen_query: 5
      } ]
    }
  },
  methods: {
    co_sco_sub_btn () {
      this.co_Mask = true
      let requery = {
        app_id: this.app_id,
        user_id: this.user_id,
        curriculum_id: this.cid,
        content: this.co_lea_text,
        score: this.co_sco_fen,
        degree: this.co_det_list_requery,
        comment_id: this.comment_id,
        lecturer_id: this.lecturer_id,
        type: 1
      }
      comments(requery).then(res => {
        let {
          code,
          data
        } = res.data
        if (code === 200) {
          this.co_tips_status = true
          setTimeout(() => {
            this.$router.go(-1)
          }, 1000)
        } else if (code === -40004) {
          this.$vux.confirm.show({
            content: '根据《中国人民共和国网络安全法》要求，自2017年6月1日起使用信息发布、即时通讯等互联网服务需进行身份信息验证。为保障您的使用体验，建议尽快完成手机号绑定验证，感谢您的理解和支持',
            // 组件除show外的属性
            onCancel: () => {
              this.$router.go(-1)
            },
            onConfirm: () => {
              this.$router.push({path: '/modify'})
            }
          })
        }
      })
    },
    co_sco_img_cre () {
      for (var i = 0; i < 5; i++) {
        this.co_sco_img[i] = this.co_sco_img_false
        for (var j = 0; j < 5; j++) {
          this.co_det_list_img_status[i][j] = this.co_det_list_img[5]
        }
      }
    },
    co_det_box_click (e, z) {
      // console.log(e, z)
      this.co_det_list[e].fen_query = z + 1
      this.co_det_list_number[e] = z + 1
      for (var i = 0; i < 5; i++) {
        this.co_det_list_img_status[e][i] = this.co_det_list_img[0]
        this.co_det_list_img_status[e][z] = this.co_det_list_img[z + 1]
        for (var j = 0; j < z; j++) {
          this.co_det_list_img_status[e][j] = this.co_det_list_img[z + 1]
        }
      }
      this.$forceUpdate()
      this.co_det_list_requery = this.co_det_list_number.join(',')
      // console.log(this.co_det_list_requery)
    },
    co_sco_img_click (e) {
      this.co_sco_status = false
      this.co_sco_fen = e
      this.co_sco_ping = this.co_sco_ping_arr[e - 1]
      if (e < this.co_sco_fen_select) {
        this.co_sco_img_cre()
      }
      this.co_sco_fen_select = e

      for (var i = 0; i < e; i++) {
        this.co_sco_img[i] = this.co_sco_img_true
      }

      if (this.co_sco_fen_select != 0 && this.co_lea_text != '') {
        this.co_sco_sub = false
      } else {
        this.co_sco_sub = true
      }
      this.$forceUpdate()
    }
  },
  watch: {
    co_lea_text () {
      this.co_lea_number = this.co_lea_text.length
      if (this.co_sco_fen_select != 0 && this.co_lea_text != '') {
        this.co_sco_sub = false
      } else {
        this.co_sco_sub = true
      }
    }
  }
}
</script>

<style scoped>
    .co_com_tips {
        position: fixed;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        z-index: 100;
    }

    .co_Scoring {
        width: 90%;
        margin: 0 5%;
        display: flex;
        height: 90px;
    }

    .co_sco_xing {
        flex: 2;
        height: 60px;
        margin: 15px 0;
    }

    .co_sco_xing>div:nth-child(1) {
        height: 35px;
    }

    .co_sco_xing>div:nth-child(2) {
        font-size: 15px;
        height: 25px;
        line-height: 25px;
        font-size: 15px;
    }

    .co_sco_xing_fen {
        color: #ff9300;
    }

    .co_sco_xing_pin {
        color: #9f9f9f;
    }

    .co_sco_xing_img>img {
        height: 25px;
        margin-top: 10px;
        margin-right: 5px;
        display: inline-block;
    }

    .co_sco_sub {
        flex: 1;
    }

    .co_sco_sub>span {
        display: block;
        border-radius: 500px;
        width: 80%;
        height: 34px;
        line-height: 34px;
        text-align: center;
        font-size: 15px;
        margin: 27px 10%;
    }

    .co_sco_sub_btn_true {
        color: #999999;
        background: #eeeeee;
    }

    .co_sco_sub_btn_false {
        background: #DA4131;
        color: white;
    }

    .co_Leaving {
        width: 90%;
        margin: 0 5%;
        height: 130px;
        background: #f7f7f7;
        position: relative;
    }

    .co_Leaving>textarea {
        border: none;
        background: none;
        outline: none;
        resize: none;
        width: calc(100% - 20px);
        margin-left: 10px;
        height: calc(100% - 40px);
        margin-top: 10px;
        font-size: 14px;
        color: #333333;
    }

    .co_lea_number {
        font-size: 12px;
        color: #8b8b8b;
        position: absolute;
        right: 15px;
        bottom: 15px;
    }

    .co_Detailed {
        width: 90%;
        margin: 0 5%;
        border-bottom: 1px solid #eeeeee;
        padding: 15px 0;
    }

    .co_det_box {
        display: flex;
        height: 40px;
        line-height: 40px;
    }

    .co_det_box_title {
        width: 80px;
        font-size: 15px;
        color: #8b8b8b;
    }

    .co_det_box_img {
        flex: 1;
    }

    .co_det_box_tips {
        width: 50px;
        font-size: 12px;
        color: #999999;
        text-align: right;
    }

    .co_det_box_img>img {
        width: 25px;
        margin-right: 5px;
        display: inline-block;
    }

    .co_Title {
        width: 90%;
        margin: 15px 5%;
        font-size: 15px;
        font-weight: bold;
        color: #666666;
    }

    .co_Mask {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 100;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0);
    }
</style>
